import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import ListTitle from "@/components/listTitle";
import { NavLink } from "react-router-dom";
import Five from "@/components/button/five";
import { getSizeImage } from "@/utils/format-utils";
import { getSongDetailAction } from "../../store/actionTypes";
import Lyric from "../lyric";

export default memo(function Left(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getSongDetailAction(props.id));
  }, [dispatch, props.id]);

  const { songDetail } = useSelector(
    (state) => ({
      songDetail: state.getIn(["songPage", "songDetail"]),
    }),
    shallowEqual
  );

  const songDetailInfo = songDetail.code == 200 && songDetail;
  const songer = songDetailInfo ? songDetailInfo.songs[0].ar[0].name : "";
  const songname = songDetailInfo ? songDetailInfo.songs[0].name : "";
  const songerID = songDetailInfo ? songDetailInfo.songs[0].ar[0].id : "";
  const songAlbumId = songDetailInfo ? songDetailInfo.songs[0].al.id : "";

  document.title = `${songname} - ${songer} - 单曲 - 网易云音乐`;

  return (
    <div className="songpage-top">
      <div className="songPage-top-left">
        <div className="songPage-top-left-img">
          <img
            src={getSizeImage(
              songDetailInfo ? songDetailInfo.songs[0].al.picUrl : "",
              130
            )}
            alt=""
          />
          <div className="msk-v coverall"></div>
        </div>
        <div className="make-video">
          <a>
            <i className="imgIcon"></i>生成外链播放器
          </a>
        </div>
      </div>
      <div className="songPage-top-right">
        <div className="songPage-top-right-text">
          <ListTitle
            pageName={"song"}
            songDetailInfo={songDetailInfo ? songDetailInfo.songs[0].name : ""}
          />
          <p>
            歌手：
            {songDetailInfo
              ? songDetailInfo.songs[0].ar.map((item, index) => {
                  return index === 0 ? (
                    <NavLink
                      key={item.name}
                      to={{
                        pathname: "/artist",
                        search: "?id=" + songerID,
                      }}
                    >
                      {item.name}
                    </NavLink>
                  ) : (
                    <React.Fragment key={item.name}>
                      /
                      <NavLink
                        to={{
                          pathname: "/artist",
                          search: "?id=" + songerID,
                        }}
                      >
                        {item.name}
                      </NavLink>
                    </React.Fragment>
                  );
                })
              : ""}
          </p>
          <p>
            所属专辑：
            <NavLink
              to={{
                pathname: "/album",
                search: "?id=" + songAlbumId,
              }}
            >
              {songDetailInfo ? songDetailInfo.songs[0].al.name : ""}
            </NavLink>
          </p>
          <Five
            id={props.id}
            subscribedCount={0}
            shareCount={0}
            commentNumber={props.total}
          />
          <Lyric id={props.id} />
        </div>
      </div>
    </div>
  );
});
